<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>truncate margin at breaks</title>
    <style>
        @page {
            size: 700px 300px;
            margin: 0;
        }
        html {
            height: 300px;

            -moz-column-count: 5;
            column-count: 5;
            -moz-column-fill: auto;
            column-fill: auto;

            line-height: 20px;

            widows: 1;
            orphans: 1;
        }
        body {
            margin: 0;
        }
        p {
            background: #DDFFDD;
        }
        #p1 {
            height: 270px;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        #p2 {
            height: 270px;
            margin-top: 20px;
            margin-bottom: 30px;
        }
        #div2 {
            margin-top: 20px;
        }
        #p3 {
            margin-top: 19px;
        }
        #div3 {
            padding-top: 1px;
        }
        #p4 {
            break-before: column;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        #p5 {
            break-before: column;
            height: 270px;
            margin-top: 10px;
            margin-bottom: 20px;
        }
        #div5 {
            background: #CCC;
            min-height: 10px;
            padding-top: 10px;
        }
    </style>
</head>
<body>
<p id="p1">The top edge of this green block should be 20px below the top edge of the page. There should be 10px margin between the bottom edge of this green block and the bottom edge of the page.</p>
<div id="div2"><p id="p2">The top edge of this green block should align with the top edge of the page.</p></div>
<div id="div3"><p id="p3">This first line should align with the first line of the first column. The top edge of this green block should be 20px below the top edge of the page.</p></div>
<p id="p4">This first line should align with the first line of the first column. The top edge of this green block should be 20px below the top edge of the page.</p>
<div id="div5"><p id="p5">This first line should align with the first lines of the first column. The top edge of this green block should be 20px below the top edge of the page. The space between them should be colored by gray.</p></div>
</body>
</html>